{{response.files.append(URL(r=request,c='static',f='js/jquery.dataTables.min.js'))}}
{{response.files.append(URL(r=request,c='static',f='css/demo_table.css'))}}
{{extend 'layout.html'}}

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    jQuery('.smarttable').dataTable({
        "iDisplayLength": 100,
        "aaSorting": []
    });
} );
</script>

<h1>Challenges by Pledgedrive</h1>

<button onclick="document.location='{{=URL(r=request,f='create_challenge',args=pledgedrive.id)}}'">Create a New challenge</button>

<div>
<table class="smarttable">
<thead>
<tr>
    <th>Title</th>
    <th>Amount</th>
    <th>Segment</th>
    <th>Description</th>
    <th>Condition</th>
    <th>State</th>
    <th>Actions</th>
</tr>
</thead>
<tbody>
{{for challenge in challenges:}}
<tr>
    <td>{{=challenge.title}}</td>    
    <td>{{=challenge.amount}}</td>
{{if challenge.segment != None:}}
    <td>{{=challenge.segment.title}}</td>
{{else:}}
    <td></td>
{{pass}}
    <td>{{=challenge.description}}</td>    
    <td>{{=challenge.condition}}</td>    
    <td>{{=challenge.state}}</td> 
    <td>
    <a href="{{=URL(r=request,f='edit_challenge',args=challenge.id)}}">Edit</a>
    </td>
</tr>
{{pass}}
</tbody>
</table>
</div>
